<template>
  <div class="video-player">
    <div v-if="videoStore.currentVideo" class="player-container">
      <video
        ref="videoRef"
        :src="videoStore.currentVideo.path"
        @timeupdate="onTimeUpdate"
        @loadedmetadata="onVideoLoaded"
        @loadeddata="onVideoLoaded"
        controls
        autoplay
      />
      <div class="controls">
        <button 
          v-if="!videoStore.isTagging" 
          class="tag-btn"
          @click="videoStore.startTagging(videoStore.currentTime)"
        >
          开始标记
        </button>
        <button 
          v-else 
          class="tag-btn"
          @click="endTagging"
        >
          结束标记
        </button>
      </div>
      <div class="timelines">
        <div 
          v-for="(group, description) in groupedTags" 
          :key="description"
          class="timeline"
        >
          <div class="progress" :style="{ width: `${progress}%` }"></div>
          <div class="timeline-description">{{ description }}</div>
          <div 
            v-for="tag in group.tags"
            :key="tag.id"
            class="tag-marker"
            :style="{
              left: `${(tag.start_time / duration) * 100}%`,
              width: `${((tag.end_time - tag.start_time) / duration) * 100}%`,
              backgroundColor: group.color || '#f44336'
            }"
            :title="`${formatTime(tag.start_time)} - ${formatTime(tag.end_time)}`"
            @click="jumpToTime(tag.start_time)"
            @dblclick.stop="startEditing(tag)"
          ></div>
        </div>
        <div v-if="videoStore.isTagging" class="timeline tagging-timeline">
          <div class="progress" :style="{ width: `${progress}%` }"></div>
          <div 
            class="tagging-marker"
            :style="{
              left: `${(videoStore.tagStartTime / duration) * 100}%`,
              width: `${((videoStore.currentTime - videoStore.tagStartTime) / duration) * 100}%`
            }"
          >
            <span class="tag-description">正在标记...</span>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="no-video">
      <p>请选择要播放的视频</p>
    </div>
    <input-dialog
      v-model="showEditDialog"
      :title="editingTag ? '编辑标签' : '添加标签'"
      :initial-value="editingTag"
      @confirm="handleEditConfirm"
      @cancel="handleEditCancel"
    />
  </div>
</template>

<script setup>
import { useVideoStore } from '../stores/videoStore'
import InputDialog from './InputDialog.vue'
import { useVideoPlayer } from '../../composables/useVideoPlayer'
import { useTagManager } from '../../composables/useTagManager'
import { formatTime } from '../../utils/format'

const videoStore = useVideoStore()
const {
  videoRef,
  duration,
  progress,
  onTimeUpdate,
  onVideoLoaded,
  jumpToTime
} = useVideoPlayer()

const {
  showEditDialog,
  editingTag,
  groupedTags,
  startEditing,
  handleEditConfirm,
  handleEditCancel
} = useTagManager()

const endTagging = () => {
  showEditDialog.value = true
}
</script>

<style scoped>
.video-player {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #000;
}

.player-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

video {
  width: 100%;
  height: 50%;
  min-height: 0;
  background: #000;
  object-fit: contain;
}

.controls {
  padding: 8px;
  display: flex;
  justify-content: center;
  gap: 8px;
  background: #222;
}

.tag-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #2196f3;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
}

.tag-btn:hover {
  background: #1976d2;
}

.timelines {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #222;
  height: calc(50% - 52px);
  overflow-y: auto;
}

.timeline {
  height: 30px;
  background: #333;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.timeline-description {
  position: absolute;
  left: 8px;
  color: #fff;
  font-size: 12px;
  z-index: 1;
  pointer-events: none;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.tagging-timeline {
  background: #2c2c2c;
}

.progress {
  height: 100%;
  background: #1976d2;
  opacity: 0.3;
  transition: width 0.1s linear;
}

.tag-marker {
  position: absolute;
  top: 0;
  height: 100%;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s;
}

.tag-marker:hover {
  opacity: 0.8;
}

.tag-marker:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
}

.tagging-marker {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(76, 175, 80, 0.5);
  pointer-events: none;
  display: flex;
  align-items: center;
  padding: 0 8px;
}

.tag-description {
  color: white;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.no-video {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}

/* 自定义滚动条样式 */
.timelines::-webkit-scrollbar {
  width: 8px;
}

.timelines::-webkit-scrollbar-track {
  background: #222;
}

.timelines::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 4px;
}

.timelines::-webkit-scrollbar-thumb:hover {
  background: #888;
}
</style> 